<template>
  <div>
    <h1>本篇内容包含APP功能教程</h1>
    <img src="../assets/images/handbookone/1.png" alt="">
    <p>1.商户入驻（注册）</p>
    <div class="btn" @click="btn1">
      点击观看商户入驻视频教程
    </div>
    <img src="../assets/images/handbookone/2.png" alt="">
    <p>2.花呗分期办理</p>
    <div class="btn" @click="btn2">
      点击观看花呗分期办理视频教程
    </div>
    <img src="../assets/images/handbookone/3.png" alt="">
    <p>3.聚合支付收款</p>
    <div class="btn" @click="btn3">
      点击观看聚合支付收款视频教程
    </div>
    <img src="../assets/images/handbookone/4.png" alt="">
    <p>4.花呗分期收款问题</p>
    <img src="../assets/images/handbookone/5.png" alt="">
    <p>5.聚合支付收款问题</p>
    <img src="../assets/images/handbookone/6.png" alt="">
    <p><span>未入驻的商户想加入</span></p>
    <p><span>请拨打客服电话联系我们</span></p>
    <p><span>025-66046356</span></p>

    <div style="height:50px"></div>


    

  </div>

</template>

<script>
export default {
    name: "handbookone",
    data() {
        return {
            msg: "Welcome to Your Vue.js App"
        };
    },
    methods: {
        btn1() {
            window.location.href = "https://v.qq.com/x/page/e13463n2mjj.html";
        },
        btn2() {
            window.location.href = "https://v.qq.com/x/page/r1347t661dz.html";
        },
        btn3() {
            window.location.href = "https://v.qq.com/x/page/q1347r7uh4j.html";
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
    text-align: center;
    color: #f19e42;
    margin-top: 20px;
}
p {
    color: rgb(0, 122, 170);
    font-size: 16px;
    padding: 10px;
    text-align: center;
}

img {
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
}
.btn {
    width: 90%;
    margin: 0 auto;
    height: 44px;
    line-height: 44px;
    background: #f19e42;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px;
}
p span {
    color: red;
    font-size: 18px;
}
</style>
